<template>
    <div class="table-page">
        <!--头部-->
        <div class="table-search-box">
            <!--输入关键字-一行-->
            <div class="search-item">
                <div class="table-query-input">
                    <el-input
                        v-model="inputKey"
                        clearable
                        placeholder="请输入关键词"
                    ></el-input>
                </div>
            </div>

            <!--搜索-行-->
            <div class="search-item">
                <!--搜索按钮-->
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoadingS"
                    @click="clickSearch()"
                >搜索
                </el-button>

            </div>

            <!--重置-->
            <div class="search-item">
                <!--重置按钮-->
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoadingF"
                    @click="infoResetSearch()"
                >重置
                </el-button>

            </div>

        </div>

        <!--列表区域-->
        <!--列表按钮-->
        <div class="table-operation-box">
            <!--新增公告-->
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                @click="addAgent()"
            >新增公告
            </el-button>

        </div>

        <!--列表-->
        <div class="table-data-box">
            <!--表格-->
            <!-- :data="对象数组"
                height="定义了height属性，即可实现固定表头的表格"
                border 竖直方向的边框(true启用)
                -->
            <el-table
                :data="agentNoticeTable"
                height="250"
                border
                style="width: 100%;min-height:40em"
            >
                <!--格子-->
                <!--多选框-->
                <!--align="center"-->
                <el-table-column
                    type="selection"
                    width="55"
                    align="center"
                ></el-table-column>

                <!--公告标题-->
                <!-- prop="对应对象中的键名(填入数据)";
                    label="定义表格的列名"
                    min-width="定义最小列宽"-->
                <el-table-column
                    prop="title"
                    label="公告标题"
                    min-width="300"
                ></el-table-column>

                <!--公告详情-->
                <el-table-column
                    prop="content"
                    label="公告详情"
                    min-width="600"
                >
                    <template slot-scope="scope">
                        <span>{{ scope.row.content }}</span>
                        <div class="content-button">
                            <el-button type="text" size="mini" style="padding-bottom: 0"
                                       @click="contentClick(scope.row)">查看全文
                            </el-button>
                        </div>
                    </template>
                </el-table-column>

                <!--创建人-->
                <el-table-column
                    prop="createdBy"
                    label="创建人"
                    min-width="150"
                ></el-table-column>

                <!--发布时间-->
                <el-table-column
                    prop="publishTime"
                    label="发布时间"
                    min-width="150"
                ></el-table-column>

                <!--操作-->
                <!--fixed="固定列(接受 Boolean 值或者left/right，表示左边固定还是右边固定)" -->
                <el-table-column
                    label="操作"
                    min-width="250"
                    fixed="right"
                    align="center"
                >
                    <template slot-scope="scope">
                        <!--取消发布-->
                        <el-button
                            type="text"
                            icon=""
                            size="mini"
                            @click="clickCloumnName(scope.$index, scope.row)"
                        >{{ scope.row.status ? cloumnNameCancel : cloumnNameRelease }}
                        </el-button>

                        <!--删除-->
                        <!--                        <el-button-->
                        <!--                        type="text"-->
                        <!--                        style="color: red;"-->
                        <!--                        icon="el-icon-delete"-->
                        <!--                        size="mini"-->
                        <!--                        @click="tableDelete(scope.$index, scope.row)"-->
                        <!--                        >删除</el-button>-->

                    </template>
                </el-table-column>

            </el-table>
        </div>

        <!--分页-->
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
                :current-page.sync="pageData.current"
                :page-sizes="pageSizes"
                :page-size.sync="pageData.size"
                @size-change="handleSzieChange"
                @current-change="handleCurrentChange"
            ></el-pagination>
        </div>


        <!--新增公告对话框-->
        <el-dialog
            title="新增公告"
            :visible.sync="dialogVisible"
        >

            <!--信息表单-->
            <el-form :model="noticeFrom" size="mini" ref="noticeFrom" :rules="noticeFromRules">
                <!--公告标题-->
                <el-form-item label="公告标题" prop="dialogTitle">
                    <el-input
                        v-model="noticeFrom.dialogTitle"
                        size="mini"
                        style="width: 30em;"
                        clearable
                    ></el-input>
                </el-form-item>

                <!--公告详情-->
                <el-form-item label="公告详情" prop="dialogDetails">
                    <el-input
                        v-model="noticeFrom.dialogDetails"
                        type="textarea"
                        style="width: 44em;"
                        :rows="12"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-form>
            <!--保存、取消按钮-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDialog()">取消</el-button>
                <el-button type="primary" @click="preservationNotice()">保存并群发</el-button>
            </div>


        </el-dialog>

        <!--是否删除-->
        <el-dialog
            title="提示"
            :visible.sync="isDeleteDialog"
        >
            <span><i class="el-icon-warning" style="color: #e6a23c; margin-right: 10px"></i>此操作将永久删除数据, 是否继续?</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isDeleteDialog = false">取 消</el-button>
                <el-button type="primary" @click="deleteNotice(deleteId)">确 定</el-button>
            </span>
        </el-dialog>

        <!--查看全文-->
        <el-dialog
            title="详情"
            :visible.sync="isContentDialog"
        >

            <!--表单-->
            <el-form :model="contentForm" size="mini">
                <!--标题-->
                <el-form-item label="公告标题">
                    <el-input v-model="contentForm.title" disabled></el-input>
                </el-form-item>

                <!--内容-->
                <el-form-item label="公告内容">
                    <el-input
                        v-model="contentForm.content"
                        type="textarea"
                        :autosize="{ minRows: 6}"
                        disabled
                    ></el-input>
                </el-form-item>


            </el-form>
            <!--关闭按钮-->
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="isContentDialog = false">关闭</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>

import {
    get,
    post,
    put,
    fetchDelete
} from "@/api/request";

export default {
    data() {
        return {
            inputKey: "",//输入框里的关键词
            tableLoadingS: false,//搜索按钮是否开始加载状态
            tableLoadingF: false,//重置按钮是否开始加载状态
            agentNoticeTable: [ //代理商公告表格

            ],//代理商公告对应的内容
            pageData: { //分页条件
                "total": 400,
                "size": 10,
                "pageSizes": [10, 20, 50],
                "current": 1,
            },
            pageSizes: [10, 20, 30, 50, 100, 200],//分页显示的条数组
            pageCurrent: 1,//当前页
            size: 10,//条数
            dialogVisible: false, //新增公告对话框是否打开<span></span>
            noticeFrom: {//新增表单
                "dialogTitle": "",//标题
                "dialogDetails": "",//详情
            },
            cloumnNameCancel: "取消发布",//操作名称(取消发布)
            cloumnNameRelease: "发布",//操作名称(发布)
            isDeleteDialog: false,//显示是否删除对话框
            deleteId: "",//删除对象的id
            isContentDialog: false,//查看详情对话框是否打开
            contentForm: { //详情对应的表单
                title: "",
                content: "",
            },
            noticeFromRules: {
                dialogTitle: [
                    {
                        required: true,
                        message: "请输入公告标题",
                        trigger: "blur"
                    }, {
                        max: 32,
                        message: "公告字数不能超过32位",
                        trigger: "blur"

                    }],
                dialogDetails: [{
                    required: true,
                    message: "请输入公告详情",
                    trigger: "blur"
                }]

            }
        }
    },
    created() {
        this.getAgentNoticeList();
    },
    methods: {
        //方法

        //接口方法(获取代理商公告数据)
        getAgentNoticeList() {
            // console.log("获取代理商公告数据！");
            get("/user/cu/agent/notice/page", {"size": this.size, "current": this.pageCurrent}).then(res => {
                // console.log("res===",res);
                this.pageData = res;
                this.agentNoticeTable = res.records;
            });
        },

        //搜索方法
        clickSearch() {
            // console.log("你点击了搜索方法！");
            //按钮开始加载状态
            this.tableLoadingS = true;

            //开始搜索
            // console.log("关键词===",this.inputKey);
            get("/user/cu/agent/notice/page", {
                "size": this.size,
                "current": this.pageCurrent,
                "noticeKey": this.inputKey
            }).then(res => {
                // console.log("res===",res);
                this.pageData = res;
                this.agentNoticeTable = res.records;
            })


            setTimeout(() => {
                this.tableLoadingS = false;
            }, 200);
        },

        //重置方法
        infoResetSearch() {
            // console.log("你点击了重置方法！");
            //按钮开始加载状态
            this.tableLoadingF = true;

            //重置
            this.size = 10;
            this.pageCurrent = 1;

            this.getAgentNoticeList();

            this.tableLoadingF = false;
        },

        //改变当前页码数的方法
        handleSzieChange(pagesize) {
            // console.log("当前页条数===",pagesize);
            this.size = pagesize;
            this.pageCurrent = 1;

            this.getAgentNoticeList();

        },

        //改变当前页的方法
        handleCurrentChange(current) {
            // console.log("当前页===",current);
            this.pageCurrent = current;
            // console.log("pageCurrent===",this.pageCurrent)
            this.getAgentNoticeList();

        },

        //操作方法
        clickCloumnName(index, row) {
            // console.log("index===",index);
            // console.log("row===",row);
            if (row.status) {
                //取消发布
                // console.log("你点击了取消发布方法！");
                this.updateNotice(row.id, false, index);
            } else {
                //发布
                // console.log("你点击了发布方法！");
                this.updateNotice(row.id, true, index);
            }

        },

        //修改公告发布请求接口
        updateNotice(agentNoticeId, status, index) {

            put("/user/cu/agent/notice/publish", {"id": agentNoticeId, "status": status}).then(res => {
                // // console.log("res===",res);
                // //发布状态
                // this.agentNoticeTable[index].status = res.status;
                // //修改时间
                // this.agentNoticeTable[index].publishTime = res.publishTime;
                this.clickSearch()
            });

        },

        //删除方法
        tableDelete(index, row) {
            // console.log("你点击了删除方法！");

            //弹窗确认是否删除
            this.isDeleteDialog = true;
            this.deleteId = row.id;
        },

        //删除请求
        deleteNotice(agentNoticeId) {

            fetchDelete("/user/cu/agent/notice/delete", {"id": agentNoticeId}).then(res => {
                // console.log("res===",res);
                let messageDelete;
                if (res) {
                    messageDelete = "删除成功！";
                } else {
                    messageDelete = "删除失败！";
                }

                //删除成功
                this.$message({
                    type: "info",
                    message: messageDelete,
                })

                //刷新
                this.infoResetSearch();

                this.isDeleteDialog = false;
            });

        },

        //新增公告
        addAgent() {
            // console.log("你点击了新增公告方法！");
            this.dialogVisible = true;
        },

        //保存代理商公告方法
        preservationNotice() {
            // console.log("你点击了保存代理商公告方法！");
            //保存代理商公告
            // console.log("公告标题===",this.noticeFrom.dialogTitle);
            // console.log("公告详情===",this.noticeFrom.dialogDetails);
            this.$refs["noticeFrom"].validate(valid => {
                if (valid) {
                    post("/user/cu/agent/notice/update", {
                        "title": this.noticeFrom.dialogTitle,
                        "content": this.noticeFrom.dialogDetails,
                        "status": true
                    }).then(() => {
                        this.infoResetSearch();
                        this.noticeFrom.dialogTitle = "";
                        this.noticeFrom.dialogDetails = "";
                    });

                    //关闭对话框
                    this.dialogVisible = false;
                }
            });
            //添加代理商公告

        },

        //取消代理商公告方法
        cancelDialog() {
            this.noticeFrom.dialogTitle = "";
            this.noticeFrom.dialogDetails = "";
            this.dialogVisible = false;
        },

        //查看全文(详情)方法
        contentClick(row) {
            // console.log("row===",row);

            this.contentForm.title = row.title;
            this.contentForm.content = row.content;

            this.isContentDialog = true;

        },
    },

};

</script>

<style lang="scss" scoped>

//详情按钮
.content-button {
    display: flex;
    justify-content: flex-end;
}

</style>
